<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Grid API</title>
        <script src="../scripts/jquery.js"></script>
        <script src="../scripts/raphael.js"></script>
    		<script src="../js/chart-core.js"></script>
    		<script src='../js/pie-chart.js'></script>
    		<script type="text/javascript">
    			$(function(){
      			  var config = {
														general:{htitle:100,hfooter:50,wleft:100,wright:100},
														chart : {
																	offset : 0,
																	r1 : 0,
																	r2 : 200,
																	delta : 20
															},
														title:{title:"Pie Chart",subtitle:"Source : Wakanda"},
														legend : {width:200,height:100,position:"rightup"}
													};
												r = Raphael("chart",900,500);
												var graphe = r.pieChart(['Maroc','France','USA','France','USA','France','USA'],[100,100,100,100,100,100,100],config,{});
/*
var r = Raphael("chart",900,500),
							    width = 100,
							    height = 50,
							    obj = {
							      width : width,
							      height:height,
							      cx : 0,
							      cy : 0,
							      radius : 10
							    },
							    theme = {
                    text : {
                      title : {fill:"red",text:"Idrissi"},
                      message : {fill:"black",text:"INPT INPT"}
                    },
                    style : {fill:"white",stroke:"blue","stroke-width":9,opacity:0.15}
                  },
                  background = {
                      display : true,
                      type : "color",
                      color : "45-#f00-#000",
                      "img-src" : "image",
                      "img-type" : "tile"
                    };
							r.background(background);
							var tooltip = r.toolTip(obj,theme);
							$("#chart").mousemove(function(e){
							  tooltip.animateTo(e.pageX+width/2,e.pageY-height/2-30,theme);
							});*/

					
    			});
    		</script>
        <style type="text/css" media="screen">
			img{
				display : none
			}
			div{
			  background-color: red
			}
            
        </style>
    </head>
    <body>
        <div id="chart">
        </div>
		<img src="me.png" id="image" />
    </body>
</html>
